<template>
  <div>
    <div class="page_box">
      <div class="title-box">
        <span class="title-line"></span>
        <span>版本设置</span>
        <el-button size="small" @click="addversion" icon="el-icon-plus">添加新版本</el-button>
      </div>
      <el-tabs style="margin-top:20px"  @tab-click="handleClick" v-model="activeName">
        <el-tab-pane label="APP版本" name="1"></el-tab-pane>
        <el-tab-pane label="PC版本" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 表格 -->
      <el-table :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}" border size="small" :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="versionNumber" label="版本号"></el-table-column>
        <el-table-column prop="versionLink" label="版本地址">
          <template slot-scope="scope">
            <a class="link" :href="scope.row.versionLink">{{scope.row.versionLink}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="versionDesc" label="版本描述">
          <template slot-scope="scope">
            <div class="link">{{scope.row.versionDesc}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="versionState" label="发布状态"></el-table-column>
        <el-table-column prop="version" label="版本"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="look(scope.row)" size="mini" icon="el-icon-view">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          background
          small
          :current-page="current_page"
          :page-size="per_page"
          layout="total, prev, pager, next, jumper"
          :total="30"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
    <!-- 添加新版本弹窗 -->
    <el-dialog @close="resetAddForm" title="添加新版本" :visible.sync="dialogAdd" width="30%">
      <el-form ref="addVersion" :rules="addFormRule" :model="addForm" label-width="100px">
        <el-form-item label="版本号：" prop="versionNumber">
          <el-input :disabled="lookFlag" size="mini" placeholder="请输入版本号" v-model="addForm.versionNumber"></el-input>
        </el-form-item>
        <el-form-item label="平台：" prop="terrace">
          <el-radio-group  :disabled="lookFlag" size="mini" v-if="!tabsIndex" v-model="addForm.terrace">
            <el-radio label="android"></el-radio>
            <el-radio label="ios"></el-radio>
          </el-radio-group>
          <el-radio-group  :disabled="lookFlag" size="mini" v-else v-model="addForm.terracePc">
            <el-radio label="PC"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="版本地址：" prop="versionLink">
          <el-input  :disabled="lookFlag" size="mini" placeholder="请输入版本地址" v-model="addForm.versionLink"></el-input>
        </el-form-item>
        <el-form-item label="版本描述：" prop="versionDesc">
          <el-input  :disabled="lookFlag" size="mini" placeholder="请输入版本描述" type="textarea" v-model="addForm.versionDesc"></el-input>
        </el-form-item>
      </el-form>
      <span v-if="!lookFlag" slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog('addVersion')">取 消</el-button>
        <el-button class="search_btn" size="mini" @click="dialogAdd = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lookFlag:false,
      addForm: {
        versionNumber: "",
        versionLink: "",
        versionDesc: "",
        terrace: "android",
        terracePc:'PC'
      },
      dialogAdd: false,
      per_page: 10,
      current_page: 1,
      activeName: "1",
      tableData: [
        {
          versionNumber: "1231234",
          versionLink: "www.baidu.com",
          versionDesc: "房间爱积分111111111111111价格",
          versionState: "已发布",
          version:'ios',
          updateTime: "2020-03-02 12:12:12"
        }
      ],
      addFormRule: {
        versionNumber: [
          { required: true, message: "请输入版本号", trigger: "blur" }
        ],
        versionLink: [
          { required: true, message: "请输入版本地址", trigger: "blur" }
        ],
        versionDesc: [
          { required: true, message: "请输入版本描述", trigger: "blur" }
        ]
      },
      tabsIndex:0
    };
  },
  methods: {
    // 改变标签栏
    handleClick (e) {
      this.tabsIndex = +e.index
      console.log(+e.index)
    },
    changePage(e) {
      console.log(e);
    },
    addversion() {
      this.dialogAdd = true;
      this.lookFlag = false;
    },
    closeDialog(addVersion) {
      this.dialogAdd = false;
      this.$refs[addVersion].resetFields()
    },
    resetAddForm() {
      this.addForm = {
        versionNumber: "",
        versionLink: "",
        versionDesc: "",
        terrace: "android",
        terracePc:'PC'
      }
    },
    look(content) {
      console.log(content)
      this.lookFlag = true
      for (const key in content) {
        for (const index in this.addForm) {
          if(key == index) {
            this.addForm[index] = content[key]
          }
        }
      }
      this.dialogAdd = true
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/setting/version/version.css");
</style>